<template>
  <div class="CarModelsPage">
    <div class="top" style="margin-bottom: 20px">
      <el-card>
        <el-form :label-position="labelPosition">
          <el-row type="flex" justify="space-around">
            <el-form-item label="车型编号：" label-width="90px">
              <el-input placeholder="请输入车型编号"></el-input>
            </el-form-item>
            <el-form-item label="应载重量：" label-width="90px">
              <el-input placeholder="请输入应载重量"></el-input>
            </el-form-item>
            <el-form-item label="应载体积：" label-width="90px">
              <el-input placeholder="请输入应载体积"></el-input>
            </el-form-item>
          </el-row>
          <!--          <el-row type="flex" justify="left">-->
          <!--            <el-col :span="8"-->
          <!--              ><el-form-item-->
          <!--                label="车型类型："-->
          <!--                label-width="90px"-->
          <!--                style="margin-left: 50px"-->
          <!--              >-->
          <!--                <el-input-->
          <!--                  placeholder="请输入车辆类型"-->
          <!--                ></el-input> </el-form-item-->
          <!--            ></el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item>-->
          <!--                <el-button-->
          <!--                  type="primary"-->
          <!--                  size="medium"-->
          <!--                  style="margin-left: 60px"-->
          <!--                  >搜索</el-button-->
          <!--                >-->
          <!--                <el-button size="medium">重置</el-button>-->
          <!--              </el-form-item></el-col-->
          <!--            >-->
          <!--            &lt;!&ndash;            <el-col :span="8"&ndash;&gt;-->
          <!--            &lt;!&ndash;              ><div class="grid-content bg-purple"></div&ndash;&gt;-->
          <!--            &lt;!&ndash;            ></el-col>&ndash;&gt;-->
          <!--          </el-row>-->
          <el-row type="flex" justify="left">
            <el-form-item
              label="车型类型："
              label-width="90px"
              style="margin-left: 50px"
            >
              <el-input placeholder="请输入车辆类型"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" style="margin-left: 60px"
                >搜索</el-button
              >
              <el-button size="medium">重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="bottom">
      <el-card>
        <el-button
          type="primary"
          style="margin-bottom: 20px"
          @click="showDialogFn('add')"
          >新增车型</el-button
        >
        <el-table
          :data="tableData"
          stripe
          style="width: 100%; border: 1px solid #ebeef5"
        >
          <el-table-column type="index" label="序号" width="70">
          </el-table-column>
          <el-table-column prop="id" label="车型编号" width="150">
          </el-table-column>
          <el-table-column prop="name" label="车辆类型"> </el-table-column>
          <el-table-column prop="num" label="车型数量"> </el-table-column>
          <el-table-column
            prop="allowableLoad"
            label="应载重量（吨）"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="allowableVolume"
            label="应载体积（立方米）"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="measureLong" label="长（米）">
          </el-table-column>
          <el-table-column prop="measureWidth" label="宽（米）">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              <el-button
                type="text"
                style="color: dodgerblue"
                @click="showDialogFn('edit')"
                >编辑</el-button
              >
              <el-button
                type="text"
                style="color: #f56c6c"
                @click="delFn(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-dialog :title="title" :visible.sync="isDialogShow">
      <el-form style="padding: 0px 40px">
        <el-form-item label="车辆类型" prop="pass" label-width="100px">
          <el-input type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass " label-width="100px">
          <el-input type="password"></el-input>
        </el-form-item>
        <el-form-item label="应载体积" prop="age" label-width="100px">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="长" prop="age" label-width="100px">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="宽" prop="age" label-width="100px">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="高" prop="age" label-width="100px">
          <el-input></el-input>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center" style="margin-top: 20px">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button>取消</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { delCarApi, getCarListApi } from "@/api/car-models";

export default {
  name: "CarModelsPage",
  data() {
    return {
      isDialogShow: false,
      labelPosition: "right",
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      title: "新增车型",
      formDate: {},
    };
  },
  created() {
    this.getCarList();
  },
  methods: {
    submit() {},
    showDialogFn(type) {
      this.isDialogShow = true;
      if (type === "add") {
        this.title === "新增车型";
      } else {
        this.title === "编辑车型";
      }
    },
    async delFn(id) {
      try {
        await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        const res = await delCarApi(id);
        console.log(res);
        this.$message.success("删除成功");
        this.getCarList();
      } catch (e) {
        this.$message.info("取消删除");
      }
    },
    async getCarList() {
      const res = await getCarListApi({
        page: this.page,
        pageSize: this.pageSize,
      });
      console.log(res);
      this.tableData = res.data.items;
      this.total = res.counts;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input {
  //margin-right: 30px;
}
</style>
